﻿<script type="text/javascript">

    function User(data) {
        this.Id = ko.observable(data.Id);
        this.Username = ko.observable(data.Username);
        this.Email = ko.observable(data.Email);
    }

    function Profile(data) {
        this.Id = ko.observable(data.Id);
        this.Created = ko.observable(data.Created);
        this.Updated = ko.observable(data.Updated);
        this.Title = ko.observable(data.Title);
        this.Description = ko.observable(data.Description);
        this.Website = ko.observable(data.Website);
        this.Skype = ko.observable(data.Skype);
        this.Facebook = ko.observable(data.Facebook);
        this.Twitter = ko.observable(data.Twitter);
        this.Linkedin = ko.observable(data.Linkedin);
        this.HourRate = ko.observable(data.HourRate);
        this.DailyRate = ko.observable(data.DailyRate);
        this.AnnualRate = ko.observable(data.AnnualRate);
        this.CommentRate = ko.observable(data.Commentrate);
        this.EmploymentType = ko.observable(data.EmploymentType);
        this.Abilities = ko.observable(data.Abilities);
        this.References = ko.observable(data.References);
        this.Availability = ko.observable(data.Availability);
        this.Other = ko.observable(data.Other);
        this.ProfilePhoto = ko.observable(data.ProfilePhoto);
        this.Cv = ko.observable(data.Cv);
        this.User = ko.observable(new User(data.User));
    }

    function ViewModel() {
        var self = this;
        self.profiles = ko.observableArray([]);
        self.workingProfileId = ko.observable(0);
        self.workingProfile = function () {
            return ko.utils.arrayFirst(this.profiles(), function (item) {
                return self.workingProfileId() == item.Id;
            });
        } .bind(this);

        //self.show = function (id) {
          //  self.workingProfileId(id);
            //$.mobile.changePage("#profileDetails", { transition: 'slideup', role: 'dialog' });
        //};
    }

    $(function () {
        var vModel = new ViewModel();
        $.getJSON("/Mobile/GetAllPersonalProfiles", function (allData) {
            var mappedProfiles = $.map(allData, function (item) { return new Profile(item); });
            vModel.profiles(mappedProfiles);
            //vModel.workingProfile(mappedProfiles[0]);
        });

        ko.applyBindings(vModel);
    });
  </script>
  
<div data-role="page" id="profileList">
    <div data-role="header">
        <h1>Personal profiles</h1>
    </div>
    <div data-role="content">
    <a href="#createProfile" data-icon="plus" data-theme="b" data-iconpos="notext" data-transition="pop">Add new profile</a>  
        <ul data-bind="foreach: profiles" id="listOfProfiles" data-role="listview" data-inset="true">
            <li>
                <a data-bind="click:function() { $parent.show($data.Id) }">
                    <h2 data-bind="text: Title"></h2>
                    <img src="../../Scripts/Knockout/img/person.png" alt="$data.Title" />
                    <p data-bind="text: $data.Description"></p>
                </a>       
            </li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
            xConnected.net 2012
        </h2>
    </div>
</div>

<div data-role="page" id="profileDetails">
    <div data-role="header" data-position="fixed">
        <a href="#profileList" data-icon="back">Back</a>
        <h1>Test header</h1>
    </div>
    <div data-role="content">
        <h2 data-bind="text: workingProfile().Title"></h2>
        <h2 data-bind="text: workingProfile().Description"></h2>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
            xConnected.net 2012
        </h2>
    </div>
</div>

  
<!--create profile-->  

  <div data-role="dialog" id="createProfile">
<div data-role="header" data-position="fixed">
        <h1>Create Profile</h1>
    </div>
    <div data-role="content">
        Name: <input type="text" data-bind="value: workingProfile().Title"></input>
        Description <textarea data-bind="value: workingProfile().Description"></textarea>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
            xConnected.net 2012
        </h2>
    </div>
</div>